<template>
  <div class="layout">
       <Layout>
        <!-- <Header>
            报表管理示例
        </Header> -->
        <Content>
            <br>
            <b>报表</b> 
            <br>
            <br>
            <Row>
                <Col span='6'>
                <Input v-model="value" placeholder="输入姓名以查询" style="width: 300px" />
                </Col>
                <Col span='6'>
                年龄
                <Select v-model="model1" style="width:200px">
                    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                <Button type="primary" @click="search">查询</Button>
                </Col>
                
            </Row>
            
        </Content>
        <Footer>
            <Table :columns="columns1" :data="data1"></Table>
        </Footer>
    </Layout>
    
  </div>
</template>

<script>
export default {
    data () {
        return {
                columns1: [
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    {
                        title: 'Age',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
                data1: [
                    {
                        name: 'John',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    }
                ],
                dataRaw: [
                    {
                        name: 'John',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    }
                ],
                cityList: [
                    {   
                        value: '0',
                        label: '<10',
                    },
                    {
                        value: '1',
                        label: '10-20'
                    },
                    {
                        value: '2',
                        label: '20-30'
                    },
                    {
                        value: '3',
                        label: '30-40'
                    },
                    {
                        value: '4',
                        label: '>40'
                    }
                ],
                model1: '',
                value:""
            }
        },
        // computed:{
        //     dataSource(){
        //         if(this.model1 = '' && this.value == "")
        //         {
        //             return this.data1;
        //         }
        //         if(this.value)
        //         {
        //             for(let i=0;i<this.data1.length;i++)
        //             {
        //                 if(this.data1[i].name != this.value)
        //                 {
        //                     this.data1.splice(i);
        //                     i--;
        //                 }
        //             }
        //         }

        //         return this.data1;
                
        //     }
        // },
    methods : {
        search() {
            this.$Message.success("查询成功");
            console.log("this.value = ",this.value);
            if(this.value == '' && this.model1 == '')
            {
                this.data1 = this.dataRaw;
                return;
            }
            if(this.value)
            {
                console.log("开始处理");
                for(let i=0;i<this.data1.length;i++)
                {
                    if(this.data1[i].name != this.value)
                    {
                        this.data1.splice(i,1);
                        i--;
                    } 
                }
            }
            
            
            //console.log("this.model1 = ",this.model1);

        }
    }
}
</script>

<style>

</style>